<template lang="">
    <div>
            <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
            <head>
                <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
                <title>美多商城-登录</title>
              
    
            </head>
            <body>
                <div id="app" v-cloak>
                <div class="login_top clearfix">
                    <a href="index.html" class="login_logo"><img src="@static/images/logo02.png"></a>	
                </div>
                <div class="login_form_bg">
                    <div class="login_form_wrap clearfix">
                        <div class="login_banner fl"></div>
                        <div class="slogan fl">商品美 · 种类多 · 欢迎光临</div>
                        <div class="login_form fr">
                            <div class="login_title clearfix">
                                <a href="javascript:;" class="cur">账户登录</a>
                            </div>
                            <div class="form_con">
                                <div class="form_input cur">
                                    <form  class="login" @submit.prevent='login'>
                                        <input type="text" v-model='form.username' name="username" class="name_input" placeholder="请输入用户">
                                        <div class="user_error">请输入5-20个字符的用户名</div>
                                        <input type="password" name="pwd" v-model='form.password' class="pass_input" placeholder="请输入密码">
                                        <div class="pwd_error">请输入8-12位的密码</div>
                                        <div class="more_input clearfix">
                                            <input type="checkbox" name="remembered" @click='remeberPass' v-model='checkPass'>
                                            <label>记住登录</label>
                                        </div>
                                        <input type="submit" value="登 录" class="input_submit">
                                    </form>
                                </div>
                            </div>
                            <div class="third_party">
                                <a href="javascript:;" class="qq_login">QQ</a>
                                <a @click='geturl' class="weixin_login">微博</a>
                                <a href="register.html" class="register_btn">立即注册</a>
                            </div>
            
                        </div>
                    </div>
                </div>
            
                <div class="footer no-mp">
                    <div class="foot_link">
                        <a href="#">关于我们</a>
                        <span>|</span>
                        <a href="#">联系我们</a>
                        <span>|</span>
                        <a href="#">招聘人才</a>
                        <span>|</span>
                        <a href="#">友情链接</a>		
                    </div>
                    <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
                    <p>电话：010-****888    京ICP备*******8号</p>
                </div>
                </div>
              
            </body>
            </html>
    </div>
</template>
<script>
import '@static/css/reset.css' 
import '@static/css/main.css' 
export default {
    data(){
        return{
            form:{username:'',password:''},
            checkPass:false
        }
    },
    methods: {
        login(){
            this.axios.post('users/login/',this.form).then(res=>{
                console.log(res)
                if(res.status==200){
                    var user = res.data
                    localStorage.setItem('token',user.token)
                    localStorage.setItem('username',user.name)
                    localStorage.setItem('id',user.id)
                    localStorage.setItem('mobile',user.mobile)
                    this.$router.push({'path':'/userInfo'})
                    
                }
            })
        },
        remeberPass(){
            var checked = this.checkPass
            if(!checked){
                localStorage.setItem('name',this.form.username)
                localStorage.setItem('password',this.form.password)
            }else{
                localStorage.setItem('name','')
                localStorage.setItem('password','')
            }
        },
        test(){
            // var token = 'jwt '+localStorage.getItem('token')
            this.axios.get('users/test/').then(res=>{
                console.log(res)
            })
        },
        logout(){
            localStorage.setItem('token','')
            localStorage.setItem('username','')
            localStorage.setItem('id','')
        },
        //微博登录
        geturl(){
            //请求接口获取地址
            this.axios.get('users/weibo/').then(res=>{
                //window.location.href跳转到地址
                window.location.href=res.data.url
            })
            
        }
    },
    mounted() {
        var name = localStorage.getItem('name')
        var password = localStorage.getItem('password')
        if (name && password){
            this.form.username=name
            this.form.password=password
            this.checkPass=true
        }
        this.test()
    },
}
</script>
<style lang="">
    
</style>